import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../../../../context';
import styles from './index.module.scss';
import classNames from 'classnames';
import { update } from '@/utils/immutableUtil';
import {
  Copy,
  RotateCw,
  X,
  ExternalLink,
  RefreshCw,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

@withConsumer
@connect(({ ppt }) => ({
  pptData: ppt.pptData,
}))
class Comp extends Component {
  state = {
    savePointsOpen: false,
    savePoints: [
      {
        id: '5',
        title: '创建未来规划页面，展示项目后续工作...',
        date: '2025/5/23 14:46:07',
      },
      {
        id: '4',
        title: '创建现状与解决方案页面，展示项目进...',
        date: '2025/5/23 14:44:00',
      },
      {
        id: '3',
        title: '创建项目进展情况页面，展示项目当前...',
        date: '2025/5/23 14:42:05',
      },
      {
        id: '2',
        title: '创建项目概述页面，简要介绍项目的背...',
        date: '2025/5/23 14:40:05',
      },
    ],
    currentSavePoint: '5',
  };

  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);

  toggleSavePointsDropdown = () => {
    this.setState((prevState) => ({
      savePointsOpen: !prevState.savePointsOpen,
    }));
  };

  selectSavePoint = (id) => {
    this.setState({
      currentSavePoint: id,
      savePointsOpen: false,
    });
    // Here you would implement the logic to load the selected save point
  };

  open = ()=>{
    window.open('/slides', '_blank');
  }

  render() {
    const { pptData } = this.props;
    const { savePoints, currentSavePoint, savePointsOpen } = this.state;

    // Find the current save point
    const currentPoint =
      savePoints.find((point) => point.id === currentSavePoint) ||
      savePoints[0];

    return (
      <div className={styles.header}>
        <div className={styles.hl}>
          <div className={styles.title}>
            <i className="iconfont icon-PPT" />
            {pptData.title}
          </div>

          <DropdownMenu.Root
            open={savePointsOpen}
            onOpenChange={this.toggleSavePointsDropdown}
          >
            <DropdownMenu.Trigger asChild>
              <button className={styles.savePointButton}>
                保存点-{currentPoint.id}
                {savePointsOpen ? (
                  <ChevronUp size={16} />
                ) : (
                  <ChevronDown size={16} />
                )}
              </button>
            </DropdownMenu.Trigger>

            <DropdownMenu.Portal>
              <DropdownMenu.Content
                className={styles.savePointsDropdown}
                sideOffset={5}
              >
                {savePoints.map((point) => (
                  <DropdownMenu.Item
                    key={point.id}
                    className={classNames(styles.savePointItem, {
                      [styles.savePointItemActive]:
                        point.id === currentSavePoint,
                    })}
                    onClick={() => this.selectSavePoint(point.id)}
                  >
                    <div className={styles.savePointHeader}>
                      <span className={styles.savePointName}>
                        保存点-{point.id}
                      </span>
                      <span className={styles.savePointDate}>{point.date}</span>
                    </div>
                    <div className={styles.savePointDescription}>
                      {point.title}
                    </div>
                  </DropdownMenu.Item>
                ))}
              </DropdownMenu.Content>
            </DropdownMenu.Portal>
          </DropdownMenu.Root>
        </div>

        <div className={styles.hr}>
          <button
            className={styles.actionButton}
            onClick={() => {
              this.open()
            }}
          >
            查看和导出
          </button>

          <div
            onClick={this.props.onClose}
            title="Close"
            className={styles.settingsButton}
          >
            <X />
          </div>
        </div>
      </div>
    );
  }
}

export default Comp;
